<template>
	<view class="card-view-page">
		<!-- 1. 顶部红色区域组件（分类+搜索） -->
		<top-red-header :weather="weatherData" :tabs="newsCategories" @tab-change="handleTabChange"
			@search="handleSearch"></top-red-header>

		<!-- 2. 新闻列表区域（原有代码保留，新增下拉刷新/上拉加载） -->
		<scroll-view class="news-scroll" scroll-y @scrolltolower="loadMore" refresher-enabled
			@refresherrefresh="onRefresh" refresher-threshold="100" refresher-default-style="black">
			<view class="news-container">
				<template v-if="filteredNewsList.length > 0">
					<CustomTextView v-for="(item, index) in filteredNewsList" :key="item.nID || index" class="news-card"
						:nID="item.nID" :title="item.title" :isTop="item.isTop" :author="item.author"
						:comments="item.comments || '0'" :time="formatNewsTime(item.time)" :mode="item.newstype"
						:images="item.imagelist" :showSearch="item.showSearch" :bgColor="item.bgColor"
						@click="onCustomViewClick(item, index)">
						<template v-slot:tips v-if="item.showSearch">
							<view class="slot-content">
								<text>搜索：</text>
								<view class="tag" v-for="(tag, tagIdx) in item.searchTags" :key="tagIdx">
									{{ tag }}
								</view>
							</view>
						</template>
					</CustomTextView>
				</template>
				<template v-else>
					<view class="empty-state">
						<text>暂无新闻数据</text>
					</view>
				</template>

				<!-- 加载中提示 -->
				<view class="loading-tip" v-if="isLoading">
					<uni-icons type="loading" size="24" color="#666" animation="spin"></uni-icons>
					<text class="tip-text">加载中...</text>
				</view>

				<!-- 到底提示 -->
				<view class="bottom-tip" v-if="!isLoading && !hasMoreData && filteredNewsList.length > 0">
					<text class="bottom-text">已经到底啦~</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	// 导入顶部红色区域组件（全局组件）
	import TopRedHeader from '@/components/top-red-header.vue';
	// 导入新闻卡片组件（原有）
	import CustomTextView from "../../components/cardViewText.vue";
	// 导入JSON新闻数据（原有）
	import newsData from "../../Data/news.json";

	// 工具函数：格式化时间（原有）
	const formatTime = (timeStr) => {
		if (!timeStr) return '';
		const time = typeof timeStr === 'number' ? timeStr : timeStr;
		const date = new Date(time);
		if (isNaN(date.getTime())) return String(timeStr);
		const now = new Date();
		const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
		const newsDate = new Date(date.getFullYear(), now.getMonth(), date.getDate());
		if (newsDate.getTime() === today.getTime()) {
			return date.toLocaleTimeString([], {
				hour: '2-digit',
				minute: '2-digit',
				hour12: false
			});
		} else {
			return date.toLocaleDateString([], {
				month: '2-digit',
				day: '2-digit',
				separator: '-'
			});
		}
	};

	export default {
		components: {
			TopRedHeader, // 注册顶部组件
			CustomTextView // 原有组件注册
		},
		data() {
			return {
				// 顶部红色区域配置
				weatherData: {
					city: '广州',
					temp: '28',
					desc: '多云转晴'
				},
				newsCategories: ['推荐', '要闻', '军事', '体育', '娱乐', '科技', '财经', '国际', '健康'], // 新闻分类
				currentCategory: '推荐', // 当前选中分类

				// 新闻列表核心数据（原有+新增）
				searchKeyword: '', // 搜索关键词（原有）
				newsList: [], // 原始新闻数据（从JSON导入）
				totalNewsList: [], // 完整新闻数据（用于分页加载）
				isLoading: false, // 加载状态
				pageNum: 1, // 当前页码
				pageSize: 34, // 每页条数
				hasMoreData: true, // 是否还有更多数据
				weatherTimer: null, // 定时器实例
				showWeatherUpdateToast: false
			};
		},
		computed: {
			// 过滤后的新闻列表（分类+搜索双重过滤）
			filteredNewsList() {
				let result = [...this.newsList]; // 基于当前页已加载数据过滤

				// 1. 分类过滤
				if (this.currentCategory !== '推荐') {
					result = result.filter(item => {
						// 假设新闻数据中用 `category` 字段存储分类（若JSON中字段不同，需对应修改）
						return item.category?.toLowerCase() === this.currentCategory.toLowerCase();
					});
				}

				// 2. 搜索过滤（原有逻辑保留）
				const keyword = this.searchKeyword.trim().toLowerCase();
				if (keyword) {
					result = result.filter(item => {
						if (item.title?.toLowerCase().includes(keyword)) return true;
						if (item.author?.toLowerCase().includes(keyword)) return true;
						if (Array.isArray(item.searchTags) && item.searchTags.some(tag => tag.toLowerCase()
								.includes(keyword))) {
							return true;
						}
						return false;
					});
				}

				return result;
			}
		},
		onLoad() {
			this.initNewsData();
			// 页面加载时初始化天气定时器
			this.initWeatherTimer();
		},
		onUnload() {
			// 页面销毁时清除定时器
			if (this.weatherTimer) {
				clearInterval(this.weatherTimer);
				this.weatherTimer = null;
			}
		},
		methods: {
			// 1. 初始化新闻数据（原有逻辑优化，支持分页）
			initNewsData() {
				if (Array.isArray(newsData.newsList) && newsData.newsList.length > 0) {
					// 存储完整数据到 totalNewsList（用于分页）
					this.totalNewsList = newsData.newsList.map(news => ({
						...news,
						searchTags: news.searchTags || [],
						bgColor: news.bgColor || "#ffffff",
						showSearch: news.showSearch || false,
						time: news.nID === "default" ? new Date().toISOString() : news.time,
						// 若JSON中无category字段，可手动分配（示例）
						category: news.category || this.newsCategories[Math.floor(Math.random() * this
							.newsCategories.length)]
					}));
					// 加载第一页数据
					this.loadPageData(1);
					console.log("从JSON导入完整新闻数据，共", this.totalNewsList.length, "条");
				} else {
					console.log("JSON无有效数据");
					this.newsList = [];
					this.totalNewsList = [];
				}
			},

			// 2. 分页加载数据
			loadPageData(pageNum) {
				return new Promise((resolve) => {
					this.isLoading = true;
					setTimeout(() => {
						const startIndex = (pageNum - 1) * this.pageSize;
						const endIndex = startIndex + this.pageSize;
						const newPageData = this.totalNewsList.slice(startIndex, endIndex);

						if (pageNum === 1) {
							this.newsList = newPageData;
						} else {
							this.newsList = [...this.newsList, ...newPageData];
						}

						this.hasMoreData = endIndex < this.totalNewsList.length;
						this.pageNum = pageNum;
						this.isLoading = false;
						uni.stopPullDownRefresh(); // 双重保障，确保刷新状态关闭
						resolve();
					}, 800);
				});
			},
			// 新增：初始化天气定时器
						initWeatherTimer() {
							// 立即更新一次天气
							this.fetchWeatherData();
							
							// 设置定时器，每5分钟更新一次天气（300000毫秒）
							// 实际项目中可根据需求调整时间间隔
							this.weatherTimer = setInterval(() => {
								this.fetchWeatherData();
							}, 300000);
						},
						
						// 新增：获取天气数据（模拟）
						fetchWeatherData() {
							// 模拟API请求延迟
							setTimeout(() => {
								// 模拟天气数据变化（实际项目中替换为真实接口请求）
								const temp = parseInt(this.weatherData.temp);
								const tempChange = Math.floor(Math.random() * 3) - 1; // -1, 0, 1 随机温度变化
								const newTemp = Math.max(10, Math.min(38, temp + tempChange)); // 限制温度范围
								
								// 天气描述列表（随机切换）
								const weatherDescs = ['晴', '多云', '阴', '多云转晴', '晴转多云', '小雨', '阵雨'];
								const randomDesc = weatherDescs[Math.floor(Math.random() * weatherDescs.length)];
								
								// 更新天气数据
								this.weatherData = {
									...this.weatherData,
									temp: newTemp.toString(),
									desc: randomDesc
								};
								
								// 显示更新提示
								this.showWeatherUpdateToast = true;
								setTimeout(() => {
									this.showWeatherUpdateToast = false;
								}, 2000);
								
								console.log('天气数据已更新:', this.weatherData);
							}, 800);
						},

			// 3. 格式化新闻时间（原有）
			formatNewsTime(time) {
				return formatTime(time);
			},

			// 4. 点击新闻卡片（原有）
			onCustomViewClick(newsItem, index) {
				console.log("点击新闻卡片 | 索引：" + index + " | 标题:" + newsItem.title, "| 新闻ID:", newsItem.nID);
				uni.navigateTo({
					 url: `/pages/newsDetail/newsDetail?newsItem=${encodeURIComponent(JSON.stringify(newsItem))}`
				});
			},

			// 5. 分类切换事件（顶部组件回调）
			handleTabChange(category) {
				this.currentCategory = category;
				this.pageNum = 1; // 重置页码
				this.loadPageData(1); // 加载对应分类第一页数据
			},

			// 6. 搜索事件（顶部组件回调）
			handleSearch(keyword) {
				this.searchKeyword = keyword;
				// 搜索时无需重置页码，基于当前已加载数据过滤
			},

			// 7. 下拉刷新事件
			onRefresh() {
				this.pageNum = 1;
				this.shuffleNewsList();
				// 确保刷新完成后关闭刷新状态
				this.loadPageData(1).then(() => {
					uni.stopPullDownRefresh(); // 确保刷新完成后关闭
				});
			},
			separateTopNews() {
				// 筛选出所有置顶新闻
				this.topNews = this.totalNewsList.filter(item => item.isTop);
				// 筛选出所有非置顶新闻
				this.nonTopNews = this.totalNewsList.filter(item => !item.isTop);
			},
			shuffleNewsList() {
				// 先分离置顶和非置顶新闻
				this.separateTopNews();

				// 只打乱非置顶新闻
				const shuffledNonTop = [...this.nonTopNews];
				for (let i = shuffledNonTop.length - 1; i > 0; i--) {
					const j = Math.floor(Math.random() * (i + 1));
					[shuffledNonTop[i], shuffledNonTop[j]] = [shuffledNonTop[j], shuffledNonTop[i]];
				}

				// 合并置顶新闻（保持原有顺序）和打乱后的非置顶新闻
				this.totalNewsList = [...this.topNews, ...shuffledNonTop];
			},

			// 8. 上拉加载更多事件
			loadMore() {
				if (!this.hasMoreData || this.isLoading) return;
				this.loadPageData(this.pageNum + 1); // 加载下一页
			}
		}
	};
</script>

<style scoped>
	/* 页面容器 */
	.card-view-page {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 滚动容器（占满剩余高度） */
	.news-scroll {
		width: 100%;
		height: calc(100vh - 200rpx);
		/* 减去顶部红色区域高度，可根据实际调整 */
	}

	/* 新闻内容区（原有样式保留） */
	.news-container {
		padding: 10rpx;
	}

	/* 新闻卡片间距（原有样式保留） */
	.news-card {
		margin-bottom: 15rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	/* 插槽内容样式（原有样式保留） */
	.slot-content {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 20rpx 15rpx;
		font-size: 20rpx;
		color: #6699ff;
	}

	.tag {
		border: 1px solid #e0e0e0;
		border-radius: 8rpx;
		margin: 0 8rpx;
		padding: 2rpx 12rpx;
		background-color: #f9f9f9;
	}

	/* 空状态（原有样式保留） */
	.empty-state {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 300rpx;
		color: #999;
		font-size: 28rpx;
	}

	/* 加载中提示 */
	.loading-tip {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0;
		color: #666;
	}

	.tip-text {
		font-size: 24rpx;
		margin-left: 10rpx;
	}

	/* 到底提示 */
	.bottom-tip {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0;
		color: #999;
	}

	.bottom-text {
		font-size: 24rpx;
	}
</style>